<template>
	<!-- <div class="main"> -->
		<div class="dragWrap"  v-on:click.stop.prevent="doThis">
			<div class="dragBox flex-h">
				<div class="spleft">
					<!-- <i>强</i> -->
					<span class="sp1"></span>
					<!-- <b>弱</b> -->
				</div>
				<div class="spRight flex1">
					<div class="list" id="list">
						<span class="spList" v-for="(item,index) in items" :key="index">
							<b>{{item.nm}}</b>
							<img @click="btnUp(index)" src="~/static/images/profession_result_icon_drag.png" class="imgIcon" alt="">
						</span>
					</div>
				</div>
			</div>
		</div>

	<!-- </div> -->
</template>
<script>
	import Sortable from 'sortablejs'
	import ls from 'store2';
	export default {
		props: {
			items:Array
		},
		data() {
			return {
				uwasc: true,
				idx: '1',
			}
		},
		mounted() {
			var _this = this;
			var $ul = this.$el.querySelector('#list')
			new Sortable($ul, {
				onUpdate: function(event) {
					//修改items数据顺序
					var newIndex = event.newIndex,
						oldIndex = event.oldIndex,
						$li = $ul.children[newIndex],
						$oldLi = $ul.children[oldIndex];
					// 先删除移动的节点
					$ul.removeChild($li)
					// 再插入移动的节点到原有节点，还原了移动的操作
					if (newIndex > oldIndex) {
						$ul.insertBefore($li, $oldLi)
					} else {
						$ul.insertBefore($li, $oldLi.nextSibling)
					}
					// 更新items数组
					var item = _this.items.splice(oldIndex, 1)
					_this.items.splice(newIndex, 0, item[0])
					// 下一个tick就会走patch更新
					_this.showScore(_this.items)
				},
				animation: 150,
			})
		},
		methods: {
			doThis(){
			},
			showScore(abc){
// 				let scoreDatas = ls.get('scoreData')
				abc.forEach((item,index)=>{
					item['num'+item.type]=6-index
				})
				this.$emit('fromChildData',abc)
// 				abc.forEach(ite=>{
// 					if(ite.type==='R'){scoreDatas.numR += ite.numR}
// 					if(ite.type==='S'){scoreDatas.numS += ite.numS}
// 					if(ite.type==='I'){scoreDatas.numI += ite.numI}
// 					if(ite.type==='E'){scoreDatas.numE += ite.numE}
// 					if(ite.type==='A'){scoreDatas.numA += ite.numA}
// 					if(ite.type==='C'){scoreDatas.numC += ite.numC}																				
// 				})
// 				
			},
			btnUp(index) {
				var item = this.items[index];
				this.items.splice(index, 1);
				this.items.unshift(item);
			},

		}
	}
</script>
<style scoped lang="less">
	.dragWrap {
		width: 100%;
		height: auto;

		.dragBox {
			width: 100%;
			height: 5.4rem;

			.spleft {
				display: block;
				width: 1.2rem;
				height: 5.4rem;

				.sp1 {
					display: block;
					width: 0.3rem;
					height: 5.4rem;
					border-radius: 0.15rem;
					// background: red;
					background: linear-gradient(top, @mainColor, #FFF8EA);
					// margin: 0 auto;
				}
			}

			.spRight {
				.list {
					.spList {
						display: block;
						height: 0.9rem;
						width: 100%;
						background: rgba(250, 250, 250, 1);

						text-align: center;
						line-height: 0.9rem;
						overflow: hidden;
						padding-right: 0.3rem;
						box-sizing: border-box;

						b {
							font-size: 0.3rem;
							font-weight: bold;
							color: rgba(34, 34, 34, 1);
							vertical-align: middle;
						}

						img {
							width: 0.32rem;
							height: 0.32rem;
							float: right;
							margin-top: 0.29rem;
							vertical-align: middle;
						}
					}
				}
			}
		}
	}
</style>
